<template>
  <div class="dashboard-container">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <el-card class="welcome-card" shadow="never">
        <div class="welcome-content">
          <div class="user-info">
            <el-avatar :size="80" :src="userInfo.avatarUrl || logoPng" class="user-avatar" />
            <div class="user-details">
              <h2 class="greeting">{{ timeFix() }}{{ userInfo?.name }}，{{ welcome() }}</h2>
              <p class="platform-name">{{ getEnvByName('VITE_APP_TITLE') }}</p>
              <div class="user-stats">
                <div class="stat-item">
                  <span class="stat-label">今日访问</span>
                  <span class="stat-value">128</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">本月租约</span>
                  <span class="stat-value">45</span>
                </div>
              </div>
            </div>
          </div>
          <div class="welcome-illustration">
            <SvgIcon name="welcome" size="200px" />
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon apartment">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M3 21h18M5 21V7l8-4v18M19 21V11l-6-4"/>
                  <path d="M9 9v.01M9 12v.01M9 15v.01M9 18v.01"/>
                </svg>
              </div>
              <div class="stat-info">
                <h3 class="stat-number">156</h3>
                <p class="stat-title">总公寓数</p>
                <span class="stat-trend positive">+12%</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon room">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                  <line x1="16" y1="2" x2="16" y2="6"/>
                  <line x1="8" y1="2" x2="8" y2="6"/>
                  <line x1="3" y1="10" x2="21" y2="10"/>
                </svg>
              </div>
              <div class="stat-info">
                <h3 class="stat-number">1,248</h3>
                <p class="stat-title">总房间数</p>
                <span class="stat-trend positive">+8%</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon tenant">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                  <circle cx="12" cy="7" r="4"/>
                </svg>
              </div>
              <div class="stat-info">
                <h3 class="stat-number">892</h3>
                <p class="stat-title">在住租客</p>
                <span class="stat-trend positive">+5%</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon revenue">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <line x1="12" y1="1" x2="12" y2="23"/>
                  <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                </svg>
              </div>
              <div class="stat-info">
                <h3 class="stat-number">¥2.8M</h3>
                <p class="stat-title">月收入</p>
                <span class="stat-trend positive">+15%</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表和快捷操作 -->
    <div class="content-section">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <h3>收入趋势</h3>
                <el-button-group size="small">
                  <el-button type="primary" plain>本周</el-button>
                  <el-button plain>本月</el-button>
                  <el-button plain>本年</el-button>
                </el-button-group>
              </div>
            </template>
            <div class="chart-placeholder">
              <div class="chart-content">
                <p>图表区域</p>
                <span>收入趋势图表将在此显示</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-card class="quick-actions-card" shadow="hover">
            <template #header>
              <h3>快捷操作</h3>
            </template>
            <div class="quick-actions">
              <div class="action-item">
                <div class="action-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                  </svg>
                </div>
                <div class="action-content">
                  <h4>添加公寓</h4>
                  <p>新增公寓信息</p>
                </div>
              </div>
              <div class="action-item">
                <div class="action-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                    <line x1="16" y1="2" x2="16" y2="6"/>
                    <line x1="8" y1="2" x2="8" y2="6"/>
                    <line x1="3" y1="10" x2="21" y2="10"/>
                  </svg>
                </div>
                <div class="action-content">
                  <h4>房间管理</h4>
                  <p>管理房间状态</p>
                </div>
              </div>
              <div class="action-item">
                <div class="action-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                    <polyline points="14,2 14,8 20,8"/>
                    <line x1="16" y1="13" x2="8" y2="13"/>
                    <line x1="16" y1="17" x2="8" y2="17"/>
                    <polyline points="10,9 9,9 8,9"/>
                  </svg>
                </div>
                <div class="action-content">
                  <h4>租约管理</h4>
                  <p>处理租约事务</p>
                </div>
              </div>
              <div class="action-item">
                <div class="action-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                  </svg>
                </div>
                <div class="action-content">
                  <h4>用户管理</h4>
                  <p>管理系统用户</p>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最近活动 -->
    <div class="activity-section">
      <el-card class="activity-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>最近活动</h3>
            <el-button type="primary" link>查看全部</el-button>
          </div>
        </template>
        <div class="activity-list">
          <div class="activity-item">
            <div class="activity-avatar">
              <el-avatar size="small">张</el-avatar>
            </div>
            <div class="activity-content">
              <p><strong>张三</strong> 提交了新的租房申请</p>
              <span class="activity-time">2分钟前</span>
            </div>
          </div>
          <div class="activity-item">
            <div class="activity-avatar">
              <el-avatar size="small">李</el-avatar>
            </div>
            <div class="activity-content">
              <p><strong>李四</strong> 完成了房间检查</p>
              <span class="activity-time">15分钟前</span>
            </div>
          </div>
          <div class="activity-item">
            <div class="activity-avatar">
              <el-avatar size="small">王</el-avatar>
            </div>
            <div class="activity-content">
              <p><strong>王五</strong> 更新了公寓信息</p>
              <span class="activity-time">1小时前</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { timeFix, welcome } from '@/utils/index'
import SvgIcon from '@/components/SvgIcon/src/SvgIcon.vue'
import { getEnvByName } from '@/utils/getEnv'
import logoPng from '@/assets/images/logo.png'

const userStore = useUserStore()
const userInfo = userStore.userInfo
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 1.5rem;
  background: var(--bg-color-page);
  min-height: 100vh;

  .welcome-section {
    margin-bottom: 2rem;

    .welcome-card {
      background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
      border: none;
      border-radius: 20px;
      overflow: hidden;

      :deep(.el-card__body) {
        padding: 2rem;
      }

      .welcome-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: white;

        .user-info {
          display: flex;
          align-items: center;
          flex: 1;

          .user-avatar {
            margin-right: 1.5rem;
            border: 3px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
          }

          .user-details {
            .greeting {
              font-size: 1.8rem;
              font-weight: 700;
              margin-bottom: 0.5rem;
              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .platform-name {
              font-size: 1rem;
              opacity: 0.9;
              margin-bottom: 1rem;
            }

            .user-stats {
              display: flex;
              gap: 2rem;

              .stat-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0.75rem 1rem;
                background: rgba(255, 255, 255, 0.15);
                border-radius: 12px;
                backdrop-filter: blur(10px);

                .stat-label {
                  font-size: 0.8rem;
                  opacity: 0.8;
                  margin-bottom: 0.25rem;
                }

                .stat-value {
                  font-size: 1.2rem;
                  font-weight: 700;
                }
              }
            }
          }
        }

        .welcome-illustration {
          opacity: 0.8;
        }
      }
    }
  }

  .stats-section {
    margin-bottom: 2rem;

    .stat-card {
      border-radius: 16px;
      border: none;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
      }

      :deep(.el-card__body) {
        padding: 1.5rem;
      }

      .stat-content {
        display: flex;
        align-items: center;

        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 1rem;

          svg {
            width: 28px;
            height: 28px;
          }

          &.apartment {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
          }

          &.room {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
          }

          &.tenant {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            color: white;
          }

          &.revenue {
            background: linear-gradient(135deg, #43e97b, #38f9d7);
            color: white;
          }
        }

        .stat-info {
          flex: 1;

          .stat-number {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-color-primary);
            margin-bottom: 0.25rem;
          }

          .stat-title {
            font-size: 0.9rem;
            color: var(--text-color-secondary);
            margin-bottom: 0.5rem;
          }

          .stat-trend {
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            border-radius: 6px;

            &.positive {
              background: rgba(67, 233, 123, 0.1);
              color: #43e97b;
            }

            &.negative {
              background: rgba(245, 87, 108, 0.1);
              color: #f5576c;
            }
          }
        }
      }
    }
  }

  .content-section {
    margin-bottom: 2rem;

    .chart-card,
    .quick-actions-card {
      border-radius: 16px;
      border: none;

      :deep(.el-card__header) {
        border-bottom: 1px solid var(--border-color-light);
        padding: 1.5rem;

        .card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;

          h3 {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-color-primary);
            margin: 0;
          }
        }
      }

      :deep(.el-card__body) {
        padding: 1.5rem;
      }
    }

    .chart-placeholder {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-color-light);
      border-radius: 12px;
      border: 2px dashed var(--border-color-light);

      .chart-content {
        text-align: center;
        color: var(--text-color-secondary);

        p {
          font-size: 1.1rem;
          font-weight: 600;
          margin-bottom: 0.5rem;
        }

        span {
          font-size: 0.9rem;
        }
      }
    }

    .quick-actions {
      .action-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        margin-bottom: 0.75rem;
        background: var(--bg-color-light);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: var(--primary-color);
          color: white;
          transform: translateX(8px);

          .action-icon {
            background: rgba(255, 255, 255, 0.2);
            color: white;
          }
        }

        &:last-child {
          margin-bottom: 0;
        }

        .action-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: var(--primary-color);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 1rem;
          transition: all 0.3s ease;

          svg {
            width: 20px;
            height: 20px;
          }
        }

        .action-content {
          h4 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
            color: var(--text-color-primary);
          }

          p {
            font-size: 0.8rem;
            color: var(--text-color-secondary);
            margin: 0;
          }
        }
      }
    }
  }

  .activity-section {
    .activity-card {
      border-radius: 16px;
      border: none;

      :deep(.el-card__header) {
        border-bottom: 1px solid var(--border-color-light);
        padding: 1.5rem;

        .card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;

          h3 {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-color-primary);
            margin: 0;
          }
        }
      }

      :deep(.el-card__body) {
        padding: 1.5rem;
      }

      .activity-list {
        .activity-item {
          display: flex;
          align-items: center;
          padding: 1rem 0;
          border-bottom: 1px solid var(--border-color-light);

          &:last-child {
            border-bottom: none;
          }

          .activity-avatar {
            margin-right: 1rem;
          }

          .activity-content {
            flex: 1;

            p {
              margin-bottom: 0.25rem;
              color: var(--text-color-primary);
              font-size: 0.9rem;
            }

            .activity-time {
              font-size: 0.8rem;
              color: var(--text-color-secondary);
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard-container {
    padding: 1rem;

    .welcome-content {
      flex-direction: column;
      text-align: center;

      .user-info {
        flex-direction: column;
        margin-bottom: 1.5rem;

        .user-avatar {
          margin-right: 0;
          margin-bottom: 1rem;
        }

        .user-stats {
          justify-content: center;
        }
      }
    }

    .stats-section {
      .el-col {
        margin-bottom: 1rem;
      }
    }
  }
}
</style>
